<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/vuejs-2.5.16.js"></script>
    <script type="text/javascript" src="/js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        <a href="add.html">添加</a>
        <table>
            <th>序号</th>
            <th>id</th>
            <th>姓名</th>
            <th>余额</th>
            <th>操作</th>
            <tr v-for="(account, index) in accountList">
                <td>{{index+1}}</td>
                <td>{{account.id}}</td>
                <td>{{account.name}}</td>
                <td>{{account.balance}}</td>
                <td>
                    <a :href="'edit.html?id='+account.id">修改</a>
                    <button @click="deleteAccount(account.id)">删除</button>
                </td>
            </tr>

        </table>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                accountList:[]
            },
            methods:{
                findall(){
                    axios.get("/account/list").then(resp=>{
                        this.accountList = resp.data
                    })
                },
                deleteAccount(id){
                    console.log(id)
                    axios.delete("/account/"+id).then(resp=>{
                        if(resp.data== "200"){
                            alert("删除成功")
                            window.location.href = "list.html"
                        }
                    })
                }
            },
            //vue构造函数created()，data methods加载完成后自动掉用,
            created(){
                this.findall()
            }
        })
    </script>
</body>
</html>